<template>
  <div class="transfer-wrapper">
    <div class="transfer-tree">
      <el-tree
        ref="treeRef"
        :data="afferentData"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        @current-change="currentChange"
        @check-change="checkChange"
        >
      </el-tree>
    </div>
    <div class="transfer-connect">
      <el-icon ><arrow-right  /></el-icon>
    </div>
    <div class="show-transfer-data">
      <el-tree
        :data="resultData"
        node-key="id"
        :props="defaultProps">
      </el-tree>
    </div>
  </div>
</template>

<script lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { defineComponent, ref } from '@vue/runtime-core';

type TreeData = {
  id: number,
  label: string,
  parentid: number,
  children: TreeData[]
}
export default defineComponent({
  components: {
		ArrowRight
	},
  name:'TransferTree',
  setup() {
    const treeRef = ref<any>(null)
    const afferentData = <TreeData[]>[
      {
        id: 1,
        label: '一级 1',
        parentid: 0,
        children: [
          {
            id: 4,
            label: '二级 1-1',
            parentid: 1,
            children: []
          },
          {
            id: 5,
            label: '二级 1-3',
            parentid: 1,
            children: []
          }
        ]
      },
      {
        id: 2,
        label: '一级 2',
        parentid: 0,
        children: []
      }
    ]
    const resultData = ref(<TreeData[]>[])
    const defaultProps = {
          children: 'children',
          label: 'label'
        }
    const currentChange = (data: TreeData, node: any) => {
      console.log(data, node)
      console.log(treeRef.value.getCheckedKeys())
      let resultList = treeRef.value.getCheckedKeys()
    }


    const checkChange = (data: TreeData, nodeCheck: boolean) => {
      console.log(data, nodeCheck)
      let list = afferentData
      if(nodeCheck && data.parentid == 0) {
        resultData.value.push(data)
      }
      if(!nodeCheck) {
        let index = resultData.value.findIndex(i => i.id === data.id)
        resultData.value.splice(index, 1)
      }
      if(nodeCheck && data.parentid != 0) {
        console.log('data', data)
        let arr = list.find(item => {
          return item.id === data.parentid
        })
        console.log(arr)
        let a = arr?.children.filter(c => {
          return c.id === data.id
        })
      }

    }
    return {
      treeRef,
      afferentData,
      resultData,
      defaultProps,
      currentChange,
      checkChange,
    }
  }
})
</script>

<style lang="scss" scoped>
.transfer-wrapper {
  display: flex;
  align-items: center;

  .transfer-tree {
    width: 200px;
    height: 300px;
    background-color: red;
  }

  .transfer-connect {
    & > i {
      font-size: 40px;
      color: $regularText;
    }
  }

  .show-transfer-data {
    width: 200px;
    height: 300px;
    background-color: yellow;
  }
}
</style>